<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="admin/_fragments :: head(~{::title})">
    <meta charset="UTF-8">
    <!--移动端预览-->
    <meta name="viewport" content="device-width, initial-scale=1.0">

    <title>后台管理-博客管理</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
    <!--引入自定义CSS-->
    <link rel="stylesheet" href="../../static/css/me.css">
</head>
<body>
    <!--导航-->
    <nav th:replace="admin/_fragments :: menu(1)" class="ui inverted attached segment segment m-padded-tb-mini m-shadow-small">
        <div class="ui container">
            <div class="ui inverted secondary stackable menu">
                <h2 class="ui teal header item">后台管理</h2>
                    <a href="#" class="m-item active item m-mobile-hide"><i class="small home icon"></i>博客管理</a>
                <a href="#" class="m-item item  m-mobile-hide"><i class="small idea icon"></i>分类管理</a>
                <a href="#" class="m-item item m-mobile-hide" ><i class="small tags icon"></i>标签管理</a>
                <a href="#" class="m-item item m-mobile-hide" ><i class="small idea icon"></i>个人信息</a>
                <div class="right m-item m-mobile-hide menu">
                    <div class="ui dropdown item">
                        <div class="text ">
                            <img class="ui avatar image" src="https://picsum.photos/id/1011/100/100">
                            罗鹏昌
                        </div>
                        <i class="dropdown icon"></i>
                        <div class="menu">
                            <a href="#" class="item">注销</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--menu toggle无任何显示意思-->
        <a href="" class="ui icon menu toggle black button m-right-top m-mobile-show">
            <i class="sidebar icon"></i>
        </a>
    </nav>
    <!--二级导航-->
    <div class="ui attached pointing menu">
      <div class="ui container">
          <div class="right menu">
              <a href="#" th:href="@{/admin/blogs/input}" class="item">发布</a>
              <a href="#" th:href="@{/admin/blogs}"  class="active teal basic item">列表</a>
          </div>
      </div>
    </div>
    <!--中间内容-->
    <div class="m-container-small m-padded-tb-big">
        <!--适应移动端手机-->
        <div class="ui container">
            <!--查询表单-->
            <div class="ui secondary segment form">
                <input type="hidden" name="page">
                <div class="inline fields">
                    <div class="field">
                        <input type="text" name="title" placeholder="标题">
                    </div>
                    <div class="field">
                        <div class="ui labeled action input">
                            <div class="ui type selection dropdown">
                                <input type="hidden" name="typeId">
                                <i class="dropdown icon"></i>
                                <div class="default text">分类</div>
                                <div class="menu">
                                    <div th:each="type : ${types}" class="item" data-value="1" th:data-value="${type.id}" th:text="${type.name}">旅行</div>
                                    <!--/*-->
                                    <div class="item" data-value="2">生活</div>
                                    <div class="item" data-value="3">Spring</div>
                                    <!--*/-->
                                </div>
                            </div>

                            <!--清除按钮-->
                            <button id="clear-btn" class="ui compact button">clear</button>
                        </div>
                    </div>
                    <div class="field">
                        <!--推荐-->
                        <div class="ui checkbox">
                            <input type="checkbox"  id="recommend" name="recommend">
                            <label for="recommend">推荐</label>
                        </div>
                    </div>
                    <div class="field">
                        <!--搜索-->
                       <button  type="button" id="search-btn" class="ui tiny teal  button"><i class="search icon"></i>搜索</button>
                    </div>
                </div>
            </div>
            <!--博客列表-->
            <div id="table-container">
                <table th:fragment="blogList" class="ui selectable compact teal table">
                    <thead>
                    <tr >
                        <th>序号</th>
                        <th>标题</th>
                        <th>类型</th>
                        <th >推荐</th>
                        <th>状态</th>
                        <th>更新时间</th>
                        <th>操作</th>
                    </tr>
                    <tbody>
                    <tr th:each="blog,iterStat : ${page.content}">
                        <td th:text="${iterStat.count}">1</td>
                        <td th:text="${blog.title}">庐山三日游-日记</td>
                        <td th:text="${blog.type.name}">旅行</td>
                        <td th:text="${blog.recommend} ? '是' :'否'">推荐</td>
                        <td th:text="${blog.published} ? '发布' :'草稿'">推荐</td>
                        <td th:text="${blog.updateTime}">2018-7-12</td>
                        <td data-label="make">
                            <a href="#" th:href="@{/admin/blogs/{id}/input(id=${blog.id})}" class="ui m-margin-right tiny teal button">修改</a>
                            <a href="#" th:href="@{/admin/blogs/{id}/delete(id=${blog.id})}" class="ui m-margin-right tiny red button">删除</a>
                        </td>
                    </tr>
                    </tbody>
                    <tfoot>
                    <!--分页组件-->
                    <th colspan="7">
                        <div class="ui mini pagination menu" th:if="${page.totalPages}>1" >
                            <a onclick="page(this)" th:attr="data-page=${page.number}-1" class="item" th:unless="${page.first}">上一页</a>
                            <a onclick="page(this)" th:attr="data-page=${page.number}+1" class=" item" th:unless="${page.last}">下一页</a>
                        </div>
                        <a href="#" th:href="@{/admin/blogs/input}" class="ui tiny orange right floated button">新增</a>
                    </th>
                    </tfoot>
                </table>
            </div>
            <!--操作提示信息-->
            <div class="ui success message" th:unless="${#strings.isEmpty(message)}">
                <i class="close icon"></i>
                <div class="header">提示：</div>
                <p th:text="${message}">恭喜，操作成功！</p>
            </div>
        </div>
    </div>
    <br>
    <br>
    <!--底部-->
    <footer  th:replace="admin/_fragments :: footer"  class="ui inverted vertical segment m-padded-tb-massive ">
        <div class="ui center aligned container ">
            <div class="ui inverted divided stackable grid">
                <div class="three wide column">
                    <div class="ui inverted link list">
                        <h4 class="ui inverted header m-opacity-min">站长微信</h4>
                        <div class="item">
                            <img src="../../static/images/pp.jpg" CLASS="ui rounded image" alt="" style="width:110px">
                        </div>
                    </div>
                </div>
                <div class="three wide column">
                    <h4 class="ui inverted header m-opacity-min">最新博客</h4>
                    <div class="ui inverted link list">
                        <a href="#" class="item">2019一年收获总结</a>
                        <a href="#" class="item">idea的操作笔记</a>
                        <a href="#" class="item">SpringBoot学习计划</a>
                    </div>
                </div>
                <div class="three wide column">
                    <h4 class="ui inverted header m-opacity-min">联系作者</h4>
                    <div class="ui inverted link list">
                        <a href="https://space.bilibili.com/431299340" class="item">b站</a>
                        <a href="#" class="item">QQ:1220127046</a>
                        <a href="#" class="item">邮箱:1220127046@qq.com</a>
                    </div>
                </div>
                <div class="seven wide column">
                    <h4 class="ui inverted header m-opacity-min">关于作者</h4>
                    <p class="m-text-thin m-text-spaced m-opacity-min m-text-lined">作者是一名springboot爱好者,是一名正在努力奋斗的学生,主要学习JavaEE开发,Web前端等技术.作者是个喜欢旅行的孩子,目标是游遍全世界！</p>
                </div>
            </div>
            <!--分割线-->
            <div class="ui inverted section divider"></div>
            <p class="m-text-thin m-text-spaced m-opacity-tiny">Copy © 2019 - 2020 作者:罗鹏昌 此站仅供个人所有 如有疑问联系作者</p>
        </div>
    </footer>

    <!--/*/<th:block th:replace="admin/_fragments :: script">/*/-->
        <!--引入jQuery-->
        <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
    <!--/*/</th:block>/*/-->
    <!--声明行内js代码域-->
    <script>
        $('.menu.toggle').click(function () {
            $('.m-item').toggleClass('m-mobile-hide');
        });

        $('.ui.dropdown').dropdown({
            on:'hover'
        });
        /*分页*/
        function page(obj) {
            $("[name='page']").val($(obj).data("page"));
            loaddata();
        }

        $("#search-btn").click(function () {
            $("[name='page']").val(0);
            loaddata();
        });

        $("#search-btn").click(function () {
            loaddata();
        });

        /*清除按钮*/
        $('#clear-btn')
            .on('click', function() {
                $('.ui.type.dropdown')
                    .dropdown('clear')
                ;
            })
        ;

        /*ajax请求*/
        function loaddata() {
            $("#table-container").load(/*[[@{/admin/blogs/search}]]*/"/admin/blogs/search",{
                title : $("[name='title']").val(),
                typeId : $("[name='typeId']").val(),
                recommend : $("[name='recommend']").prop('checked'),
                page : $("[name='page']").val()
            });
        }

        //消息提示关闭初始化
        $('.message .close')
            .on('click', function () {
                $(this)
                    .closest('.message')
                    .transition('fade');
            });

    </script>
    <script type="text/javascript">
        (function(window,document,undefined){
            var hearts = [];
            window.requestAnimationFrame = (function(){
                return window.requestAnimationFrame ||
                    window.webkitRequestAnimationFrame ||
                    window.mozRequestAnimationFrame ||
                    window.oRequestAnimationFrame ||
                    window.msRequestAnimationFrame ||
                    function (callback){
                        setTimeout(callback,1000/60);
                    }
            })();
            init();
            function init(){
                css(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}");
                attachEvent();
                gameloop();
            }
            function gameloop(){
                for(var i=0;i<hearts.length;i++){
                    if(hearts[i].alpha <=0){
                        document.body.removeChild(hearts[i].el);
                        hearts.splice(i,1);
                        continue;
                    }
                    hearts[i].y--;
                    hearts[i].scale += 0.004;
                    hearts[i].alpha -= 0.013;
                    hearts[i].el.style.cssText = "left:"+hearts[i].x+"px;top:"+hearts[i].y+"px;opacity:"+hearts[i].alpha+";transform:scale("+hearts[i].scale+","+hearts[i].scale+") rotate(45deg);background:"+hearts[i].color;
                }
                requestAnimationFrame(gameloop);
            }
            function attachEvent(){
                var old = typeof window.onclick==="function" && window.onclick;
                window.onclick = function(event){
                    old && old();
                    createHeart(event);
                }
            }
            function createHeart(event){
                var d = document.createElement("div");
                d.className = "heart";
                hearts.push({
                    el : d,
                    x : event.clientX - 5,
                    y : event.clientY - 5,
                    scale : 1,
                    alpha : 1,
                    color : randomColor()
                });
                document.body.appendChild(d);
            }
            function css(css){
                var style = document.createElement("style");
                style.type="text/css";
                try{
                    style.appendChild(document.createTextNode(css));
                }catch(ex){
                    style.styleSheet.cssText = css;
                }
                document.getElementsByTagName('head')[0].appendChild(style);
            }
            function randomColor(){
                return "rgb("+(~~(Math.random()*255))+","+(~~(Math.random()*255))+","+(~~(Math.random()*255))+")";
            }
        })(window,document);
    </script>
</body>
</html>